<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      ref="queryFormRef"
      class="-mb-15px"
      :model="queryParams"
      :inline="true"
      label-width="100px"
    >
      <el-form-item label="站点名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入站点名称"
          clearable
          class="!w-240px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button @click="handleQuery">
          <Icon icon="ep:search" class="mr-5px" /> 搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon icon="ep:refresh" class="mr-5px" /> 重置
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <el-table
      v-loading="loading"
      :data="list"
      @selection-change="handleRowCheckboxChange"
    >
      <!-- <el-table-column type="selection" width="55" />
      <el-table-column label="岗位编号" align="center" prop="id" /> -->
      <el-table-column label="加油站名称" align="center" prop="name" />
      <el-table-column label="所属辖区" align="center" prop="name" />
      <el-table-column label="密闭性" align="center" prop="name" />
      <el-table-column label="气液比" align="center" prop="name" />
      <el-table-column label="液阻合格数量" align="center" prop="name" />
      <el-table-column label="不合格数量" align="center" prop="name" />
      <el-table-column
        label="不满足检检测条件数量"
        align="center"
        prop="name"
      />
      <el-table-column label="总计" align="center" prop="name" />
    </el-table>
    <!-- 分页 -->
    <Pagination
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      :total="total"
      @pagination="getList"
    />
  </ContentWrap>
</template>
<script setup>
import { DICT_TYPE, getIntDictOptions } from "@/utils/dict";
import { dateFormatter } from "@/utils/formatTime";
import download from "@/utils/download";
import * as PostApi from "@/api/system/post";

defineOptions({ name: "SystemPost" });

const message = useMessage(); // 消息弹窗

const loading = ref(true); // 列表的加载中
const total = ref(0); // 列表的总页数
const list = ref([]); // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  code: "",
  name: "",
  status: undefined,
});
const queryFormRef = ref(); // 搜索的表单
const exportLoading = ref(false); // 导出的加载中

/** 查询岗位列表 */
const getList = async () => {
  loading.value = true;
  try {
    const data = await PostApi.getPostPage(queryParams);
    list.value = data.list;
    total.value = data.total;
  } finally {
    loading.value = false;
  }
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1;
  getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields();
  handleQuery();
};

/** 添加/修改操作 */
const formRef = ref();
const openForm = (type, id) => {
  formRef.value.open(type, id);
};

/** 删除按钮操作 */
const handleDelete = async (id) => {
  try {
    // 删除的二次确认
    await message.delConfirm();
    // 发起删除
    await PostApi.deletePost(id);
    message.success("删除成功");
    // 刷新列表
    await getList();
  } catch {}
};

/** 批量删除按钮操作 */
const checkedIds = ref([]);
const handleRowCheckboxChange = (rows) => {
  checkedIds.value = rows.map((row) => row.id);
};

const handleDeleteBatch = async () => {
  try {
    // 删除的二次确认
    await message.delConfirm();
    // 发起批量删除
    await PostApi.deletePostList(checkedIds.value);
    message.success("删除成功");
    // 刷新列表
    await getList();
  } catch {}
};

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm();
    // 发起导出
    exportLoading.value = true;
    const data = await PostApi.exportPost(queryParams);
    download.excel(data, "岗位列表.xls");
  } catch {
  } finally {
    exportLoading.value = false;
  }
};

/** 初始化 **/
onMounted(() => {
  getList();
});
</script>
